<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"
	/>
	<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<style>
		#con {
			margin: 10px;
			font-size: 24px;
		}

		ul {
			margin-bottom: 10px;
		}

		ul li {
			margin: 5px 10px;
			padding: 5px;
			color: #000;
			word-wrap: break-word;
		}

		.green {
			background: green;
			color: #fff;
		}
	</style>
</head>

<body>
	<label id="con">Place choose your device to boot</label>
	<input type="button" value="开始扫描" id="start-scan">
	<input type="button" value="停止扫描" id="stop-scan">
	<div id='ble-list'>
		<ul>

		</ul>
	</div>
</body>
<script type="text/javascript" src="../script/underscore-min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>

<script type="text/template" id="ble-list-tpl">
	<% _.each(peripherals, function(item) { %>
		<li class="device" uuid="<%=item.uuid%>">
			<h2>
				<%=item.name%>
			</h2>
			<p>
				<%=item.uuid%>
			</p>
		</li>
		<% }); %>
</script>

<script type="text/javascript">
	apiready = function () {
		var ble = api.require('ble');
		var template = _.template($api.byId('ble-list-tpl').innerHTML);

		document.querySelector('#start-scan').addEventListener('click', function () {
			ble.scan({
				serviceUUIDs: ['0000fff0-0000-1000-8000-00805f9b34fb']
			}, function (ret) {
				if (ret.status) {
					setTimeout(function () {
						ble.getPeripheral(function (ret) {
							if (ret) {
								//alert(JSON.stringify(ret));
								$api.html($api.dom("#ble-list>ul"), template(ret));
							}
						});
					}, 1500);
				}
			});
		});

		document.querySelector('#stop-scan').addEventListener('click', function () {
			ble.stopScan();
		});

		function hasClass(obj, cls) {
			return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
		}

		function addClass(obj, cls) {
			if (!hasClass(obj, cls)) obj.className += " " + cls;
		}

		function removeClass(obj, cls) {
			if (hasClass(obj, cls)) {
				var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
				obj.className = obj.className.replace(reg, ' ');
			}
		}

		document.querySelector('#ble-list').addEventListener('click', function (e) {
			var target = $api.closest(e.target, '.device');
			var uuid = target.getAttribute('uuid');

			if (hasClass(target, 'green')) {
				ble.disconnect({
					peripheralUUID: uuid
				}, function (ret, err) {
					if (ret.status) {
						removeClass(target, 'green');
					}
				});
				return false;
			}


			ble.connect({
				peripheralUUID: uuid
			}, function (ret, err) {
				if (ret.status) {
					addClass(target, 'green');
					api.openFrame({
						name: 'main',
						url: './deviceInfo.html',
						bounces: true,
						pageParam: {
							peripheralUUID: uuid
						},
						animation:{
                type:"push",                //动画类型（详见动画类型常量）
                subType:"from_right",       //动画子类型（详见动画子类型常量）
                duration:300       
              }
					});


				} else {
					alert(err.code);
				}
			});


		});

		$api.byId('start-scan')
		ble.initManager(function (ret) {
			if (ret.state == "poweredOn") {

			}
		});
	};

</script>

</html>